<template>
	<view class="xdl-search bg-xdl-color">
		<view class="xdl-search-main b-flex space alcenter">
			<view class="search-left plr30">
				<view @click="searchArea" class="b-flex alcenter ft16 text-white">
					<view class="search-area ftw500">{{region}}</view>
					<view class="scale6">
						<view class="search-jt G-font g-arrow-down"></view>
						<!--:class="{'on':areaDiv}"-->
					</view>
				</view>
			</view>
			<view class="search-center plr30 b-flex alcenter ft16 text-notice">
				<view class="G-font g-search"></view>
				<view class="ml20">
					<!-- <u--input border="none" placeholder="搜索活动"></u--input> -->
					<swiper class="search-swiper" :vertical="true" :indicator-dots="false" :autoplay="true"
						:interval="3000" :duration="500">
						<swiper-item>
							<navigator :url="'/pages/search/index?keyword='+encodeURI('新动力越野')">
								<view class="text-over">新动力越野</view>
							</navigator>
						</swiper-item>
						<swiper-item>
							<navigator :url="'/pages/search/index?keyword='+encodeURI('马术')">
								<view class="text-over">马术</view>
							</navigator>
						</swiper-item>
						<swiper-item>
							<navigator :url="'/pages/search/index?keyword='+encodeURI('生活方式')">
								<view class="text-over">露营</view>
							</navigator>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="search-right plr30">
				<view>搜索</view>

			</view>
		</view>

		<popup-layer ref="popupRef" :direction="'right'">
			<view style="width:750upx;height: 100%;">
				<citySelect @back_city="back_city"></citySelect>
			</view>
		</popup-layer>

		
	</view>
</template>

<script>
	import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	export default {
		components: {
			citySelect,
			popupLayer
		},
		computed: {},
		data() {
			return {
				region:"定位",
				areaDiv: false,
			};
		},
		mounted() {
			this.$refs.popupRef.close();
		},
		methods: {
			searchArea() {
				var that = this
				this.$refs.popupRef.show();
				//this.areaDiv = !this.areaDiv;
			},
			back_city(e) {
				if (e !== 'no' && e) {
					console.log('33',e)
					this.region = e.city
					this.$emit('back_shop', e);
					this.$refs.popupRef.close();
				} else {
					this.$refs.popupRef.close();
				}
			}
		}
	}
</script>

<style>
	.search-right {
		font-size: 28rpx;
		width: 65rpx;
		margin-right: 20rpx;
		height: 72rpx;
		color: #000000;
		justify-content: center;
		align-items: center;
		display: flex;
		border-radius: 50rpx;
		background-color: #ffffff;
	}

	/*层级要高于底部菜单*/
	.xdl-search {
		height: 100rpx;
		position: relative;
		z-index: 168;
	}

	.xdl-search-main {
		height: 100rpx;
	}

	.xdl-search-area {
		position: absolute;
		z-index: 168;
		width: 100%;
		height: calc(100vh - 100rpx);
		overflow-y: scroll;
		background: #FFFFFF;
	}

	.search-center {
		height: 72rpx;
		width: 340rpx;
		border-radius: 36rpx;
		background: #F5F5F5;
	}

	.notice-body {
		width: 48rpx;
		height: 48rpx;
		position: relative;
	}

	.notice-badge {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 8rpx;
	}

	.search-swiper {
		width: 320rpx;
		height: 40rpx;
	}

	.search-jt {
		display: inline-block;
		transition: all .3s;
		font-weight: bold;
	}

	.search-area {
		width: 100rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.search-jt.on {
		transform: rotate(180deg);
		font-weight: bold;
	}
</style>
